<template>
  <view class="patrol-detail-container">
    <!-- 顶部标题和状态 -->
    <view class="detail-header">
      <view class="plan-title">{{ planName }}</view>
      <view class="plan-status" :class="statusClass">{{ statusText }}</view>
    </view>
    <view class="progress-bar-section">
      <view class="progress-label">巡更进度：{{ progress }}%</view>
      <view class="progress-count">{{ checkedCount }}/{{ totalCount }} 个点位</view>
      <view class="progress-bar-bg">
        <view class="progress-bar" :style="{ width: progress + '%' }"></view>
      </view>
    </view>
    <!-- 筛选tab -->
    <view class="point-tabs">
      <view
        v-for="(tab, idx) in pointTabs"
        :key="tab.value"
        :class="['point-tab', activeTab === idx ? 'active' : '']"
        @click="activeTab = idx"
      >{{ tab.label }}</view>
    </view>
    <!-- 列表/地图模式切换 -->
    <view class="mode-switch">
      <!-- 列表模式按钮 -->
      <view
        :class="['mode-btn', mode === 'list' ? 'active' : '']"
        @click="mode = 'list'"
      >
        <image
          :src="mode === 'list' ? '/static/icons/list2.png' : '/static/icons/list1.png'"
          class="mode-icon"
          mode="widthFix"
        />
        <text :class="['mode-text', mode === 'list' ? 'active' : '']">列表模式</text>
      </view>
      <!-- 地图模式按钮 -->
      <view
        :class="['mode-btn', mode === 'map' ? 'active' : '']"
        @click="mode = 'map'"
      >
        <image
          :src="mode === 'map' ? '/static/icons/map2.png' : '/static/icons/map1.png'"
          class="mode-icon"
          mode="widthFix"
        />
        <text :class="['mode-text', mode === 'map' ? 'active' : '']">地图模式</text>
      </view>
    </view>
    <!-- 巡更点列表 -->
    <view v-if="mode === 'list'">
      <view v-for="(point, idx) in filteredPointList" :key="point.id" :class="['point-card', point.status === 1 ? 'point-card-gray' : '']">
        <view class="point-header">
          <view class="point-index">{{ idx + 1 }}</view>
          <view class="point-title">{{ point.name }}</view>
          <view class="point-status" :class="point.statusClass">{{ point.statusText }}</view>
        </view>
        <view class="point-title-divider"></view>
        <view class="point-info">
          <view>编号：{{ point.code }}</view>
          <view>位置：{{ point.location }}</view>
          <view>类别：{{ point.category }}</view>
          <view>执行人：{{ point.executorName }}</view>
          <view class="point-info-divider"></view>
          <view>打卡时间：{{ formatCheckTime(point.checkTime) }}</view>
          <view>巡检结果：{{ point.result || '-' }}</view>
        </view>
        <view class="point-actions">
          <button class="nav-btn" @click="navigateToPoint(point)">
            <image src="/static/icons/navigation.png" class="action-icon" mode="widthFix" />
            <text class="action-text">导航</text>
          </button>
          <!-- 只有未打卡的点才显示打卡按钮 -->
          <button v-if="point.status !== 1" class="check-btn" @click="handleCheckIn(point)">
            <image src="/static/icons/clock_in.png" class="action-icon" mode="widthFix" />
            <text class="action-text">打卡</text>
          </button>
        </view>
      </view>
    </view>
    <!-- 地图模式 -->
    <view v-show="mode === 'map'" style="height: 1000rpx; margin: 24rpx;">
      <map
        :latitude="mapCenter.latitude"
        :longitude="mapCenter.longitude"
        :markers="markers"
        style="width: 100%; height: 100%;"
        scale="16"
      ></map>
    </view>
    <!-- 底部操作栏 -->
    <view class="bottom-actions">
      <button class="pause-btn" :class="{'btn-active': taskStatus === 3}" @click="handlePauseTask" :disabled="taskStatus === 2 || taskStatus === 4 || taskStatus === 5">
        {{ taskStatus === 3 ? '继续任务' : '暂停任务' }}
      </button>
      <button class="report-btn" @click="handleReport">异常上报</button>
      <button class="finish-btn" @click="handleFinishTask" :disabled="taskStatus === 2 || taskStatus === 4 || taskStatus === 5">完成任务</button>
    </view>
    <!-- 异常上报弹窗 -->
    <uni-popup ref="reportPopup" type="center">
      <view class="report-popup">
        <view class="popup-header">
          <text class="popup-title">异常上报</text>
          <text class="popup-close" @click="$refs.reportPopup.close()">×</text>
        </view>
        <view class="popup-content">
          <textarea 
            class="report-input" 
            v-model="reportContent" 
            placeholder="请输入异常情况说明..."
            maxlength="500"
          ></textarea>
          <view class="char-count">{{reportContent.length}}/500</view>
        </view>
        <view class="popup-footer">
          <button class="cancel-btn" @click="$refs.reportPopup.close()">取消</button>
          <button class="submit-btn" @click="submitReport">提交</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import request from '@/util/request.js';

export default {
  name: 'PatrolDetail',
  data() {
    return {
      taskId: null,
      planName: '',
      statusText: '',
      statusClass: '',
      progress: 0,
      checkedCount: 0,
      totalCount: 0,
      remark: '',
      taskStatus: 1, // 添加任务状态：0=暂停，1=进行中，2=完成
      pointTabs: [
        { label: '全部(0)', value: 'all' },
        { label: '已打卡(0)', value: 'checked' },
        { label: '未打卡(0)', value: 'unchecked' },
        { label: '已逾期(0)', value: 'overdue' }
      ],
      activeTab: 0,
      mode: 'list',
      pointList: [],
      mapCenter: { latitude: 0, longitude: 0 },
      markers: [],
      currentTask: null,    // 当前选中的任务
      reportContent: "",    // 异常报告内容
      taskList: [],
      allTaskList: [],
      currentCount: 0,
      historyCount: 0,
    }
  },
  computed: {
    filteredPointList() {
      let list = this.pointList.slice();
      // 列表模式下全部tab，未打卡优先
      if (this.activeTab === 0) {
        return list.sort((a, b) => {
          if (a.status === 1 && b.status !== 1) return 1;
          if (a.status !== 1 && b.status === 1) return -1;
          return 0;
        });
      }
      if (this.activeTab === 1) return list.filter(p => p.status === 1);
      if (this.activeTab === 2) return list.filter(p => p.status === 0);
      if (this.activeTab === 3) return list.filter(p => p.status === 2);
      return list;
    }
  },
  methods: {
    navigateToPoint(point) {
      const plugin = requirePlugin('routePlan');
      const key = 'T2XBZ-S6ECJ-I6FFW-DVAFC-PB2KZ-BVFZC'; // 使用在腾讯位置服务申请的key
      const referer = 'xiaowo_proprietor_app'; // 调用插件的app的名称
      // 确保point对象中有latitude和longitude字段
      if (!point.latitude || !point.longitude) {
        uni.showToast({
          title: '该点位缺少经纬度信息',
          icon: 'none'
        });
        return;
      }
      const endPoint = JSON.stringify({  //终点
          'name': point.name,
          'latitude': point.latitude,
          'longitude': point.longitude
      });
      uni.navigateTo({
          url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint
      });
    },
    setMarkers() {
      if (!this.pointList.length) {
        this.markers = [];
        return;
      }
      // 只取有经纬度的点
      const pointMarkers = this.pointList
        .filter(point => point.latitude && point.longitude)
        .map(point => ({
          id: point.id,
          latitude: point.latitude,
          longitude: point.longitude,
          iconPath: point.status === 1 ? '/static/icons/complete.png' : '/static/icons/error.png',
          width: 32,
          height: 32,
          callout: {
            content: point.name,
            color: '#333333',
            fontSize: 12,
            borderRadius: 4,
            bgColor: '#ffffff',
            padding: 5,
            display: 'ALWAYS'
          }
        }));
      this.markers = pointMarkers;
      // 地图中心定位到第一个点
      if (pointMarkers.length) {
        this.mapCenter = {
          latitude: pointMarkers[0].latitude,
          longitude: pointMarkers[0].longitude
        };
      }
    },
    async fetchDetail() {
      const taskId = this.taskId;
      if (!taskId) return;
      try {
        uni.showLoading({
          title: '加载中...',
          mask: true
        });
        
        const res = await request({
          url: `patrol-server/patrolTask/detail?taskId=${taskId}`,
          method: 'GET'
        });
        
        uni.hideLoading();
        
        if (res && res.data) {
          this.pointList = res.data; // 直接赋值
          this.planName = res.data.plan_name;
          this.taskStatus = res.data.status || 1; // 保存任务状态，默认为进行中
          this.statusText = this.getStatusText(this.taskStatus);
          this.statusClass = this.getStatusClass(this.taskStatus);
          this.remark = res.data.remark;
          this.totalCount = this.pointList.length;
          this.checkedCount = this.pointList.filter(p => p.status === 1).length;
          this.progress = this.totalCount ? Math.round(this.checkedCount / this.totalCount * 100) : 0;
          // tab数量
          this.updateTabs();
          
          // 检查任务是否已完成
          this.checkTaskCompletion();
        }
      } catch (e) {
        uni.hideLoading();
        uni.showToast({ title: '加载失败', icon: 'none' });
        console.error('加载详情错误:', e);
      }
    },
    getStatusText(status) {
      // 根据数据库中的状态值返回对应文本
      switch (status) {
        case 0: return '未开始';
        case 1: return '进行中';
        case 2: return '已完成';
        case 3: return '已暂停';
        case 4: return '已取消';
        case 5: return '执行失败';
        default: return '未知';
      }
    },
    getStatusClass(status) {
      // 根据数据库中的状态值返回对应样式
      switch (status) {
        case 0: return 'status-todo';    // 未开始
        case 1: return 'status-doing';   // 进行中
        case 2: return 'status-done';    // 已完成
        case 3: return 'status-paused';  // 已暂停
        case 4: return 'status-canceled'; // 已取消
        case 5: return 'status-failed';  // 执行失败
        default: return '';
      }
    },
    getPointStatusText(status) {
      // 0未打卡 1已打卡 2逾期
      if (status === 1) return '已打卡';
      if (status === 2) return '已逾期';
      return '未打卡';
    },
    getPointStatusClass(status) {
      if (status === 1) return 'point-status-checked';
      if (status === 2) return 'point-status-overdue';
      return 'point-status-unchecked';
    },
    updateTabs() {
      const checked = this.pointList.filter(p => p.status === 1).length;
      const unchecked = this.pointList.filter(p => p.status === 0).length;
      const overdue = this.pointList.filter(p => p.status === 2).length;
      this.pointTabs = [
        { label: `全部(${this.totalCount})`, value: 'all' },
        { label: `已打卡(${checked})`, value: 'checked' },
        { label: `未打卡(${unchecked})`, value: 'unchecked' },
        { label: `已逾期(${overdue})`, value: 'overdue' }
      ];
    },
    // 格式化打卡时间
    formatCheckTime(timeStr) {
      if (!timeStr) return '-';
      
      try {
        // 解析时间字符串
        const date = new Date(timeStr);
        if (isNaN(date.getTime())) {
          return timeStr; // 如果解析失败，返回原始字符串
        }
        
        // 格式化为 YYYY-MM-DD HH:mm:ss 格式
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        const hours = String(date.getHours()).padStart(2, '0');
        const minutes = String(date.getMinutes()).padStart(2, '0');
        const seconds = String(date.getSeconds()).padStart(2, '0');
        
        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      } catch (e) {
        console.error('时间格式化错误:', e);
        return timeStr || '-';
      }
    },
    handleCheckIn(point) {
      if (!point.latitude || !point.longitude) {
        uni.showToast({ title: '该点无坐标，无法打卡', icon: 'none' });
        return;
      }
      uni.getLocation({
        type: 'gcj02',
        success: (res) => {
          const distance = this.getDistance(res.latitude, res.longitude, point.latitude, point.longitude);
          const radius = point.radius || 3000;
          console.log(distance, radius);
          if (distance < radius) {
            // 跳转到打卡页面，并传递点位信息、计划名称和巡更进度
            const planNameParam = this.planName ? `&planName=${encodeURIComponent(this.planName)}` : '';
            const progress = this.progress || 0; // 当前巡更进度
            const totalCount = this.totalCount || 0; // 总点位数
            const checkedCount = this.checkedCount || 0; // 已打卡点位数
            
            uni.navigateTo({
              url: `/pages/patrol/checkin?pointId=${point.id}&taskId=${this.taskId}&pointName=${encodeURIComponent(point.name || '')}&pointCode=${encodeURIComponent(point.code || '')}&pointLocation=${encodeURIComponent(point.location || '')}&progress=${progress}&totalCount=${totalCount}&checkedCount=${checkedCount}${planNameParam}`
            });
          } else {
            uni.showToast({ title: '还未到打卡点范围，无法打卡', icon: 'none' });
          }
        },
        fail: (err) => {
          uni.showToast({ title: '定位失败，无法打卡', icon: 'none' });
        }
      });
    },
    // 计算两点间距离（米）
    getDistance(lat1, lng1, lat2, lng2) {
      const toRad = d => d * Math.PI / 180;
      const radLat1 = toRad(lat1);
      const radLat2 = toRad(lat2);
      const a = radLat1 - radLat2;
      const b = toRad(lng1) - toRad(lng2);
      const r = 6378137; // 地球半径(米)
      const s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
      return Math.round(s * r);
    },
    
    // 暂停/继续任务
    async handlePauseTask() {
      try {
        // 如果当前是完成状态，则不允许操作
        if (this.taskStatus === 2 || this.taskStatus === 4 || this.taskStatus === 5) {
          uni.showToast({
            title: '该任务状态无法操作',
            icon: 'none'
          });
          return;
        }
        
        // 确认对话框
        const confirmText = this.taskStatus === 3 ? '继续' : '暂停';
        
        uni.showModal({
          title: `确认${confirmText}任务`,
          content: `确定要${confirmText}此巡更任务吗？`,
          success: async (res) => {
            if (res.confirm) {
              uni.showLoading({
                title: '处理中...',
                mask: true
              });
              
              // 切换状态：1(进行中) -> 3(已暂停) 或 3(已暂停) -> 1(进行中)
              const newStatus = this.taskStatus === 1 ? 3 : 1;
              
              const result = await request({
                url: 'patrol-server/patrolTask/updateStatus',
                method: 'POST',
                data: {
                  taskId: this.taskId,
                  status: newStatus
                }
              });
              
              if (result && result.code === 200) {
                this.taskStatus = newStatus;
                this.statusText = this.getStatusText(newStatus);
                this.statusClass = this.getStatusClass(newStatus);
                
                uni.showToast({
                  title: `任务${confirmText}成功`,
                  icon: 'success'
                });
                
                // 如果是暂停操作，则返回到巡更列表页面
                if (newStatus === 3) {
                  // 延迟返回，确保Toast能够显示
                  setTimeout(() => {
                    // 获取页面栈，找到巡更列表页面
                    const pages = getCurrentPages();
                    if (pages.length > 1) {
                      // 如果有上一页，返回上一页并刷新
                      const prevPage = pages[pages.length - 2];
                      if (prevPage && prevPage.$vm && prevPage.$vm.getAllTaskList) {
                        prevPage.$vm.getAllTaskList();
                      }
                      uni.navigateBack();
                    } else {
                      // 如果没有上一页，跳转到巡更首页
                      uni.redirectTo({
                        url: '/pages/patrol/index'
                      });
                    }
                  }, 800);
                }
              } else {
                uni.showToast({
                  title: `操作失败：${result.message || '未知错误'}`,
                  icon: 'none'
                });
              }
              
              uni.hideLoading();
            }
          }
        });
      } catch (error) {
        console.error('暂停/继续任务错误：', error);
        uni.hideLoading();
        uni.showToast({
          title: '操作失败：' + (error.message || '网络错误'),
          icon: 'none'
        });
      }
    },
    
    // 完成任务
    async handleFinishTask() {
      try {
        // 如果当前状态不允许操作，则提示用户
        if (this.taskStatus === 2 || this.taskStatus === 4 || this.taskStatus === 5) {
          uni.showToast({
            title: `该任务${this.getStatusText(this.taskStatus)}，无法操作`,
            icon: 'none'
          });
          return;
        }
        
        console.log('点位列表详情:', JSON.stringify(this.pointList));
        console.log('未打卡点位:', this.pointList.filter(p => parseInt(p.status) === 0 || p.status === null));
        
        // 检查是否所有点都已打卡
        const uncheckedCount = this.pointList.filter(p => parseInt(p.status) === 0 || p.status === null).length;
        console.log(uncheckedCount)
        let confirmContent = '确定要完成此巡更任务吗？';
        
        if (uncheckedCount > 0) {
          confirmContent = `还有${uncheckedCount}个点位未打卡，确定要完成巡更任务吗？确定会导致任务失败`;
        }
        console.log(confirmContent)
        uni.showModal({
          title: '确认完成任务',
          content: confirmContent,
          success: async (res) => {
            if (res.confirm) {
              uni.showLoading({
                title: '处理中...',
                mask: true
              });
              
              // 判断是否有未打卡点位
              const status = uncheckedCount > 0 ? 5 : 2; // 有未打卡点位则为执行失败(5)，否则为完成(2)
              
              const result = await request({
                url: 'patrol-server/patrolTask/complete',
                method: 'POST',
                data: {
                  taskId: this.taskId,
                  status: status
                }
              });
              
              if (result && result.code === 200) {
                this.taskStatus = status;
                this.statusText = this.getStatusText(status);
                this.statusClass = this.getStatusClass(status);
                
                uni.showToast({
                  title: '任务已完成',
                  icon: 'success'
                });
                
                // 延迟一秒后返回列表页并刷新
                setTimeout(() => {
                  const pages = getCurrentPages();
                  if (pages.length > 1) {
                    // 如果有上一页，返回上一页并刷新
                    const prevPage = pages[pages.length - 2];
                    if (prevPage && prevPage.$vm && prevPage.$vm.fetchPatrolList) {
                      prevPage.$vm.fetchPatrolList();
                    }
                    uni.navigateBack();
                  } else {
                    // 如果没有上一页，跳转到巡更首页
                    uni.redirectTo({
                      url: '/pages/patrol/index'
                    });
                  }
                }, 1000);
              } else {
                uni.showToast({
                  title: `完成失败：${result.message || '未知错误'}`,
                  icon: 'none'
                });
              }
              
              uni.hideLoading();
            }
          }
        });
      } catch (error) {
        console.error('完成任务错误：', error);
        uni.hideLoading();
        uni.showToast({
          title: '操作失败：' + (error.message || '网络错误'),
          icon: 'none'
        });
      }
    },
    
    // 异常上报
    handleReport() {
      console.log('点击异常上报按钮');
      console.log('refs:', this.$refs);
      
      // 检查popup是否存在
      if (!this.$refs.reportPopup) {
        console.error('reportPopup不存在');
        uni.showToast({
          title: '组件未加载，请重试',
          icon: 'none'
        });
        return;
      }
      
      this.reportContent = this.remark || '';
      this.$refs.reportPopup.open();
    },
    // 检查任务是否可以完成（所有点位已打卡）
    checkTaskCompletion() {
      // 任务已经是完成、取消或失败状态
      if (this.taskStatus === 2 || this.taskStatus === 4 || this.taskStatus === 5) {
        return true;
      }
      
      // 检查是否所有点位都已打卡
      const allChecked = this.pointList.every(point => point.status === 1);
      
      // 如果全部打卡完成，且任务状态是进行中或暂停，提示用户完成任务
      if (allChecked && (this.taskStatus === 1 || this.taskStatus === 3) && this.pointList.length > 0) {
        uni.showModal({
          title: '提示',
          content: '所有点位已打卡完成，是否结束巡更任务？',
          success: (res) => {
            if (res.confirm) {
              this.handleFinishTask();
            }
          }
        });
        return true;
      }
      
      return allChecked;
    },
    // 显示异常上报弹窗
    showReportPopup(item) {
      this.currentTask = item;
      this.reportContent = item.remark || ''; // 如果已有备注则显示
      this.$refs.reportPopup.open();
    },
    // 提交异常上报
    async submitReport() {
      if (!this.reportContent.trim()) {
        uni.showToast({
          title: '请输入异常说明',
          icon: 'none'
        });
        return;
      }
      
      uni.showLoading({
        title: '提交中...'
      });
      
      try {
        const res = await request({
          url: 'patrol-server/patrolTask/updateRemark',
          method: 'POST',
          data: {
            taskId: this.taskId,
            remark: this.reportContent
          }
        });
        
        uni.hideLoading();
        
        if (res.code === 200) {
          uni.showToast({
            title: '异常已上报',
            icon: 'success'
          });
          
          // 更新本地数据
          this.remark = this.reportContent;
          
          this.$refs.reportPopup.close();
        } else {
          uni.showToast({
            title: res.message || '提交失败',
            icon: 'none'
          });
        }
      } catch (error) {
        uni.hideLoading();
        console.error('上报异常失败:', error);
        uni.showToast({
          title: '网络错误，请稍后再试',
          icon: 'none'
        });
      }
    }
  },
  watch: {
    mode(newVal) {
      if (newVal === 'map') {
        this.setMarkers();
      }
    },
    pointList: {
      handler() {
        if (this.mode === 'map') {
          this.setMarkers();
        }
      },
      deep: true
    }
  },
  onLoad(options) {
    this.taskId = options.taskId;
    this.fetchDetail();
  },
  
  // 页面显示时检查任务状态
  onShow() {
    // 如果有taskId，则刷新数据
    if (this.taskId) {
      this.fetchDetail();
    }
  }
}
</script>

<style scoped>
.patrol-detail-container {
  background: #f7f8fa;
  min-height: 100vh;
  padding-bottom: 120rpx;
}
.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32rpx 28rpx 0 28rpx;
}
.plan-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #222;
}
.plan-status {
  font-size: 24rpx;
  border-radius: 20rpx;
  padding: 4rpx 18rpx;
  font-weight: 500;
}
.plan-status.status-doing { color: #ff9800; background: #fff3e0; }
.plan-status.status-todo { color: #1a7cf7; background: #eaf4ff; }
.plan-status.status-done { color: #4caf50; background: #e8f5e9; }
.plan-status.status-paused { color: #9e9e9e; background: #f5f5f5; }
.plan-status.status-canceled { color: #f44336; background: #ffebee; }
.plan-status.status-failed { color: #d32f2f; background: #ffcdd2; }
.progress-bar-section {
  padding: 0 28rpx;
  margin-top: 12rpx;
}
.progress-label, .progress-count {
  font-size: 24rpx;
  color: #888;
  margin-bottom: 6rpx;
}
.progress-bar-bg {
  width: 100%;
  height: 12rpx;
  background: #e0e0e0;
  border-radius: 6rpx;
  margin-top: 6rpx;
  position: relative;
}
.progress-bar {
  height: 12rpx;
  background: #1a7cf7;
  border-radius: 6rpx;
  position: absolute;
  left: 0;
  top: 0;
}
.point-tabs {
  display: flex;
  background: #fff;
  margin: 24rpx 24rpx 0 24rpx;
  border-radius: 16rpx;
  overflow: hidden;
}
.point-tab {
  flex: 1;
  text-align: center;
  padding: 24rpx 0;
  font-size: 28rpx;
  color: #888;
}
.point-tab.active {
  color: #1a7cf7;
  background: #eaf4ff;
  font-weight: bold;
}
.mode-switch {
  display: flex;
  margin: 24rpx 24rpx 0 24rpx;
}
.mode-btn {
  flex: 1;
  text-align: center;
  padding: 20rpx 0;
  background: #fff;
  border-radius: 12rpx 0 0 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mode-btn.active {
  background: #1a7cf7;
}
.mode-btn:last-child {
  border-radius: 0 12rpx 12rpx 0;
}
.mode-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 12rpx;
}
.mode-text {
  font-size: 28rpx;
  color: #222;
}
.mode-text.active {
  color: #fff;
}
.mode-btn:not(.active) .mode-text {
  color: #888;
}
.point-card {
  position: relative;
  background: #fff;
  border-radius: 16rpx;
  margin: 24rpx 24rpx 0 24rpx;
  box-shadow: 0 2rpx 8rpx #e6e6e6;
  padding: 28rpx 24rpx 20rpx 24rpx;
}
.point-header {
  display: flex;
  align-items: center;
  margin-bottom: 12rpx;
}
.point-index {
  width: 36rpx;
  height: 36rpx;
  background: #1a7cf7;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 36rpx;
  font-size: 24rpx;
  margin-right: 16rpx;
}
.point-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #222;
  flex: 1;
}
.point-status {
  font-size: 24rpx;
  border-radius: 20rpx;
  padding: 4rpx 18rpx;
  font-weight: 500;
  background: #ffeaea;
  color: #ff4d4f;
}
.point-info {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 16rpx;
  line-height: 2.2;
}
.point-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 24rpx;
  margin-top: 18rpx;
}
.nav-btn,
.check-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 180rpx;
  height: 60rpx;
  font-size: 32rpx;
  border-radius: 32rpx;
  padding: 0 36rpx;
  border: none;
  box-shadow: 0 2rpx 8rpx #e6e6e6;
}
.nav-btn {
  background: #3bb3fa;
  color: #fff;
}
.check-btn {
  background: #ff9800;
  color: #fff;
}
.action-icon {
  width: 36rpx;
  height: 36rpx;
  margin-right: 10rpx;
  vertical-align: middle;
}
.action-text {
  font-size: 32rpx;
  font-weight: 500;
  color: #fff;
}
.bottom-actions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: space-around;
    background: #fff;
    padding: 18rpx 24rpx 18rpx 24rpx;
    box-shadow: 0 -2rpx 8rpx #e6e6e6;
    gap: 24rpx;
    z-index: 10;
}
.pause-btn {
  background: #ff5252;
  color: #fff;
  border-radius: 20rpx;
  font-size: 26rpx;
  padding: 12rpx 32rpx;
  border: none;
  flex: 1;
}
.pause-btn.btn-active {
  background: #4caf50; /* 使用绿色表示"继续任务" */
}
.pause-btn[disabled], .finish-btn[disabled], .report-btn[disabled] {
  opacity: 0.5;
  background: #ccc;
  color: #666;
}
.report-btn {
  background: #ffb300;
  color: #fff;
  border-radius: 20rpx;
  font-size: 26rpx;
  padding: 12rpx 32rpx;
  border: none;
  flex: 1;
}
.finish-btn {
  background: #4caf50;
  color: #fff;
  border-radius: 20rpx;
  font-size: 26rpx;
  padding: 12rpx 32rpx;
  border: none;
  flex: 1;
}
.point-title-divider {
  height: 1px;
  background: #f0f0f0;
  margin: 12rpx 0 18rpx 0;
}
.point-info-divider {
  height: 1px;
  background: #f0f0f0;
  margin: 18rpx 0 18rpx 0;
}
/* 已打卡置灰 */
.point-card-gray {
  background: #f5f5f5 !important;
  filter: grayscale(1);
  color: #bbb !important;
}
/* 让按钮和文字也变灰 */
.point-card-gray .point-header,
.point-card-gray .point-title,
.point-card-gray .point-status,
.point-card-gray .point-info,
.point-card-gray .point-actions,
.point-card-gray .action-text {
  color: #bbb !important;
}
.point-card-gray .nav-btn,
.point-card-gray .check-btn {
  background: #e0e0e0 !important;
  color: #bbb !important;
  border: none;
}
/* 异常上报按钮样式 */
.report-btn {
  border-radius: 20rpx;
  font-size: 24rpx;
  padding: 8rpx 24rpx;
  border: none;
  min-width: 100rpx;
  min-height: 40rpx;
  box-shadow: none;
  margin-left: 16rpx;
}

.btn-red {
  background: #f44336;
  color: #fff;
}

/* 弹窗样式 */
.report-popup {
  width: 600rpx;
  background: #fff;
  border-radius: 20rpx;
  overflow: hidden;
}

.popup-header {
  padding: 30rpx;
  text-align: center;
  position: relative;
  border-bottom: 1px solid #f0f0f0;
}

.popup-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.popup-close {
  position: absolute;
  right: 30rpx;
  top: 30rpx;
  font-size: 40rpx;
  color: #999;
}

.popup-content {
  padding: 30rpx;
}

.report-input {
  width: 100%;
  height: 300rpx;
  background: #f9f9f9;
  border: 1px solid #eee;
  border-radius: 10rpx;
  padding: 20rpx;
  font-size: 28rpx;
  color: #333;
}

.char-count {
  text-align: right;
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
}

.popup-footer {
  display: flex;
  border-top: 1px solid #f0f0f0;
}

.popup-footer button {
  flex: 1;
  border: none;
  background: none;
  height: 90rpx;
  line-height: 90rpx;
  font-size: 30rpx;
  border-radius: 0;
}

.cancel-btn {
  color: #666;
  border-right: 1px solid #f0f0f0;
}

.submit-btn {
  color: #1a7cf7;
  font-weight: bold;
}
</style> 